<template>
  <div class="detail-container">
    <NavBar />
    <div class="header">
      <h1>数据统计</h1>
      <el-button @click="goBack">返回</el-button>
    </div>
    <div class="header">
      <h3>落地页</h3>
    </div>
    <div class="stats">
      <el-card v-for="(stat, index) in webstatistics" :key="index" class="stat-item">
        <h2>{{ stat.value || 0 }}</h2>
        <p>{{ stat.title || '' }}</p>
      </el-card>
    </div>
    <div class="header">
      <h3>应用内</h3>
    </div>
    <div class="stats">
      <el-card v-for="(stat, index) in appstatistics" :key="index" class="stat-item">
        <h2>{{ stat.value || 0 }}</h2>
        <p>{{ stat.title || '' }}</p>
      </el-card>
    </div>
    <div class="header">
      <h3>走势图</h3>
    </div>
    <div>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="echarts-div">
            <div id="main" ref="echartsDom" style="height: 100%; width: 100%; padding: 10px;"></div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { appStatisticsApi } from '@/api/apps';
import * as echarts from "echarts";
import NavBar from '@/components/NavBarEnhanced.vue';
export default {
  components: {
    NavBar
  },
  data() {
    return {
      id: '',
      webstatistics: [],
      appstatistics: [],
      loading: false
    };
  },
  created() {
    this.id = this.$route.query.id;
    if (!this.id) {
      this.$message.error('应用ID不能为空');
      this.gotoConsole();
      return;
    }
    this.getAppStatistics();
  },
  methods: {
    goBack() {
      this.$router.push('/console');
    },
    async getAppStatistics() {
      try {
        this.loading = true;
        let res = await appStatisticsApi(this.id);
        if (res.code !== 200) {
          throw new Error(res.msg || '获取应用详情失败');
        }
        this.webstatistics = res.data.web || [];
        this.appstatistics = res.data.app || [];
        this.line = res.data.line || [];
        this.initChart(this.line);
      } catch (error) {
        this.$message.error(error.message);
      } finally {
        this.loading = false;
      }
    },
    initChart(data) {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: 'Stacked Line'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: data.legend
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: data.xAxis,
        yAxis: {
          type: 'value'
        },
        series: data.series
      };

      option && myChart.setOption(option);
    }
  },
};
</script>

<style scoped>
.detail-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h1 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}
.header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}
.stats {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
  flex-wrap: wrap;
  gap: 20px;
}

.stat-item {
  flex: 1;
  min-width: 200px;
  text-align: center;
}

.stat-item h2 {
  color: #409EFF;
  font-size: 30px;
  margin-bottom: 8px;
}

.stat-item p {
  color: #606266;
  font-size: 16px;
  margin: 0;
}

.chart {
  margin: 20px 0;
  background: white;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}

.table-container {
  margin-top: 20px;
  background: white;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
}
.echarts-div {
  width: 100%;
  height: 400px;
  border: 1px solid #e6ebf5;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>